<template>
  <div class="report-test1">
    <div class="filter-container">
      <el-date-picker
        v-model="datePicker"
        type="datetimerange"
        align="left"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        style="width: 410px"
        class="filter-item"
        :picker-options="pickerOption"
        clearable
      >
      </el-date-picker>
      <el-select
        v-model="testConfig.source"
        placeholder="请选择渠道"
        clearable
        style="width: 120px"
        class="filter-item"
      >
        <el-option
          v-for="item in sourceOptions"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        />
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-search"
        class="filter-item"
        circle
        @click="clickSetOption"
      ></el-button>
    </div>
    <div class="report">
      <div class="chart" id="loan" ref="loan"></div>
    </div>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import reportTest1 from '@/assets/report/report-test1.png'
import { parseTime } from '@/utils/index'
import EchartConfig from './test1Chart'
@Component({
  name: 'report-test1',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  @Prop({ default: '' }) private propExp1!: string
  // @Prop({ required: true }) private propExp2?: boolean
  private dataExp: any = ''
  private reportTest1 = reportTest1
  private datePicker = []
  private testConfig: any = {
    begin: '',
    end: '',
    source: '360'
  }
  private sourceOptions = [
    {
      key: '360',
      value: '360'
    },
    {
      key: 'mybank',
      value: '网商'
    }
  ]
  private pickerOption = {
    disabledDate(time: any) {
      let curDate = new Date().getTime()
      let month = 30 * 24 * 3600 * 1000
      let oneMonth = curDate - month
      return time.getTime() > Date.now() || time.getTime() < oneMonth
    }
  }
  get dayStand() {
    //computed 属性
    let dateTime = 1000 * 60 * 60 * 24
    return (
      Math.floor(
        (Date.parse(this.testConfig.end) - Date.parse(this.testConfig.begin)) /
          dateTime
      ) + 1
    )
  }
  @Watch('datePicker')
  private onDatePickerChange(value: boolean) {
    this.testConfig.begin = this.datePicker
      ? parseTime(this.datePicker[0])
      : undefined
    this.testConfig.end = this.datePicker
      ? parseTime(this.datePicker[1])
      : undefined
  }
  created() {
    // 最早可以调用vue组件method的钩子
  }
  mounted() {
    //mounted 钩子
    this.clickSetOption()
  }
  private methodExp() {
    // method创建地方
  }
  private clickSetOption() {
    if (this.$refs.loan) {
      let chart = new EchartConfig('loan')
      chart.setOption({
        name: `渠道：${
          this.testConfig.source ? this.testConfig.source : '所有'
        }`,
        end:
          this.testConfig.end.length > 0
            ? this.testConfig.end
            : parseTime(new Date()),
        dayStand: this.dayStand ? this.dayStand : 30
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.report-test1 {
  padding: 20px;
  .report {
    height: 640px;
    width: 100%;
    padding: 0 40px;
    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
